<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>开发因素</span>
          <el-button class="button" text @click.stop="openDetail">{{ showDetail ? '收起' : '查看详情' }}</el-button>
        </div>
      </template>
      <div class="text item">
        <el-button :icon="Refresh" circle @click="getRdfValue" />
        <p v-if="rdf != null">当前因子（RDF）：{{rdf}}</p>
        <p v-else>尚未评议</p>
      </div>
    </el-card>
    <transition name="expand">
      <div v-if="showDetail" class="detail-content">
        <h2>模块C2的详细信息</h2>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="pdf-container">
              <embed :src="pdfPath" width="100%" height="500px" type="application/pdf" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="questions">
              <el-form @submit.prevent="validateForm">
                <div class="question">
                  <el-form-item label="开发语言因素" :error="errors.slOption">
                    <el-radio-group v-model="answers.slOption" :disabled="disabled">
                      <el-radio label="0">C及其他同级别语言/平台</el-radio>
                      <el-radio label="1">JAVA、C++、C#及其他同级别语言/平台</el-radio>
                      <el-radio label="2">PowerBuilder、ASP及其他同级别语言/平台</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="question">
                  <el-form-item label="团队背景因素" :error="errors.dtOption">
                    <el-radio-group v-model="answers.dtOption" :disabled="disabled">
                      <el-radio label="0">为本行业开发过类似的软件</el-radio>
                      <el-radio label="1">为其他行业开发过类似的软件，或为本行业开发过不同但相关的软件</el-radio>
                      <el-radio label="2">没有同类软件及本行业相关软件开发背景</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <el-button type="primary" native-type="submit" class="save-button">保存</el-button>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-button @click="closeDetail" class="close-button" type="primary" size="large">关闭</el-button>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { currentProjectTask } from './Variables/costVariables';
import { updateRdfInfo, getRdfInfo } from '../../api/Cost/rdfApi';
import { Refresh } from '@element-plus/icons-vue';
import { getProjectDetails } from '../../api/Report/projectData';
import { getProcess, updateProcessHistory } from '../../api/Cost/costApi';
import { ElMessage } from 'element-plus';

const showDetail = ref(false);
const disabled = ref(false);
const pdfPath = ref();
const rdf = ref();
const processSet = ref({
  pdr_process: 0,
  rdf_process: 0,
  swf_process: 0,
  rsk_process: 0,
  cost_process: 0,
  total_process: 0
});
const task = ref();

const fetchProcess = async () => {
  const res = await getProcess(currentProjectTask.projectId);
  processSet.value = res.data;
  task.value = res.task;
  updateProcessHistory(task.value);
};

const getPDFUrl = async () => {
  const res = await getProjectDetails(currentProjectTask.projectId);
  pdfPath.value = res.project.url;
};
getPDFUrl();

const getRdfValue = async () => {
  const res = await getRdfInfo(currentProjectTask.projectId);
  rdf.value = res.rdf;
};
getRdfValue();

const answers = ref({
  projectId: currentProjectTask.projectId,
  dtOption: null,
  slOption: null
});

const errors = ref({
  dtOption: '',
  slOption: ''
});

const validateForm = async() => {
  let valid = true;
  if (answers.value.slOption === null) {
    errors.value.slOption = '请选择开发语言因素';
    valid = false;
  } else {
    errors.value.slOption = '';
  }

  if (answers.value.dtOption === null) {
    errors.value.dtOption = '请选择团队背景因素';
    valid = false;
  } else {
    errors.value.dtOption = '';
  }

  if (valid) {
    await onSubmit();
  }
};

const openDetail = () => {
  showDetail.value = true;
};

const closeDetail = () => {
  showDetail.value = false;
};

const onSubmit = async() => {
  await updateRdfInfo(answers.value);
  await fetchProcess();
  await getRdfValue();
  closeDetail();
  ElMessage({
      message: '保存成功',
      type: 'success',
    });
};
</script>

<style scoped>
.box-card {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  height: 260px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.box-card::before {
  content: 'RDF';
  font-size: 175px;
  background: linear-gradient(to right, #4dafe878, #efcfb683); /* 渐变色 */
  -webkit-background-clip: text;
  color: transparent; /* 使文字本身透明，显示背景的渐变色 */
  position: absolute;
  font-weight: bold;
  top: 60%;
  left: 49%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 确保文字不可交互 */
}

.box-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
}

.text {
  font-size: 16px;
  margin-top: 10px;
  color: black;
}

.detail-content {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: #fff;
  z-index: 1000;
  padding: 20px;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: scale(1);
  opacity: 1;
  transition: all 0.5s ease;
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.5s ease;
}

.expand-enter,
.expand-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

.pdf-container {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.questions {
  padding: 10px;
}

.question {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.question:hover {
  background-color: #e0f7fa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.el-radio {
  margin: 5px 0;
}

.save-button {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  background: linear-gradient(to right, #42a5f5, #478ed1);
  border: none;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.save-button:hover {
  background: linear-gradient(to right, #b6d1ea, #c2dff6);
}

.save-button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.el-divider {
  margin: 20px 0;
}

.el-form-item__error {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}
</style>
